<!--
 * @Author: chenwll chenwell1025@163.com
 * @Date: 2024-10-29 17:33:17
 * @LastEditors: chenwll chenwell1025@163.com
 * @LastEditTime: 2024-11-01 15:16:48
 * @FilePath: select-com\src\view\tableView\index.vue
 * @Description: 
-->
<template>
  <div class="">
    <cTable 
    :rows="rows"
    :columns="columns"
    isShowSelection="checkbox"
    :isShowSum="true"
    :pageConfig="pageConfig"
    :pageSizes="[2,10, 20, 50, 100]"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @handleDetails="handleDetails"
    @handleUpdate="handleUpdate"
    @handleSortChange="handleSortChange"
    @handleSwitchChange="handleSwitchChange"
    @handleSelectionChange="handleSelectionChange"
    >
      <template #createUserName="{data}">
        <div>
          {{ data }}
        </div>
      </template>
  </cTable>
  </div>
</template>

<script>
import { rows,columns } from "./table"
export default {
  name: "tableView",
  components: {
    cTable: () => import("@/components/cTable")
  },
  mixins: [],
  props: {},
  data () {
    return {
      pageNum:1,
      pageSize: 2,
      total:4,
      rows: rows,
      columns: columns,
    }
  },
  computed: {
    pageConfig(){
      return {
        pageNum:this.pageNum,
        pageSize: this.pageSize,
        total:this.rows.length
      }
    },
  },
  watch: {},
  filter: {},
  created () { },
  mounted () { },
  methods: {
    handleSizeChange(pageSize){
      this.pageSize = pageSize
    },
    handleCurrentChange(num){
      this.page = num
    },
    handleDetails(val){
      console.log("handleDetails",val);
    },
    handleUpdate(val){
      console.log("handleUpdate",val);
    },
    handleSwitchChange(val){
      console.log("handleSwitchChange",val);
    },
    handleSortChange(val){
      console.log("handleSortChange",val);
    },
    handleSelectionChange(val){
      console.log("handleSelectionChange",val);
    }
  },
}
</script>
<style lang='scss' scoped>
</style>
